<template>
<div ref="mainMapall" 
    class="mapinfobox"
    v-loading="loadingMapall"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0,0,0, 0.2)"
    element-loading-text="地图数据装载中"
></div>
</template>

<script>
import * as echarts from 'echarts';
import $ from 'jquery';
import {getDeptInfo,getEnergyDeptdata}  from "@/api/sendhttp/maptree.js";

export default {
  name: "FullsreenMapTree",
  props: {
  },
  data() {
    return {
      loadingMapall:true,
	  formdata:{},
	  echartsData:[],
    };
  },
  mounted(){
    //导航地图
    this.getDeptDatas();
  },
  created() {
    
  },
  methods: {
	  async getDeptDatas(){
	  		 var that=this;
	  		 await getDeptInfo(this.formdata).then(res => {
	  			 var resData=res.data;
	  			 if(resData.code==200){
	  				 var resDatas=resData.data
	  				 resDatas.forEach(async(v,i) => {
	  					 //console.log(resDatas[i])
	  					 var resx=await getEnergyDeptdata({level_id:v.level_id})
	  					 //console.log(resx)
	  					 if(resx.data.code==200){
	  						 var kv=resx.data.data;
	         var _electricDayCount = 0;
	         var _electricMonthaCount = 0;
	         var _gasDayCount = 0;
	         var _gasMonthaCount = 0;
	         var _waterDayCount = 0;
	         var _waterMonthaCount = 0;
	        kv.forEach(function(item){
	          if(item.level_id == v.level_id){
	            if(item.type_id == '1'){
	              _electricDayCount = item.dayCount;
	              _electricMonthaCount = item.monthCount;
	            }
	            
	            if(item.type_id == '2'){
	              _waterDayCount = item.dayCount;
	              _waterMonthaCount = item.monthCount;
	            }
	            
	            if(item.type_id == '3'){
	              _gasDayCount = item.dayCount;
	              _gasMonthaCount = item.monthCount;
	            }
	          }
	        });
	  						 var textbox='<label style="font-size:20px;padding-bottom:10px;">'+v.level_name+'</label><br/><table>'
	  						 +'<tr><td><b>用电：</b></td><td>今日：'+ _electricDayCount +'kWh </td><td width=20 align=center>|</td><td> 本月：'+ _electricMonthaCount +'kWh</td></tr>'
	  						 +'<tr><td><b>用气：</b></td><td>今日：'+ _gasDayCount +'m³ </td><td width=20 align=center>|</td><td> 本月：'+ _gasMonthaCount +'m³</td></tr>'
	  						 +'<tr><td><b>用水：</b></td><td>今日：'+ _waterDayCount +'m³ </td><td width=20 align=center>|</td><td> 本月：'+ _waterMonthaCount +'m³</td></tr></table>';
	  						 //v.level_code.push(textbox);
	  						 //console.log('textbox:',textbox)
	  						 var edata=[]
	  						 edata.push(v.level_x);
	  						 edata.push(v.level_y);
	  						 edata.push(v.level_name);
	  						 edata.push(textbox);
	  						 that.echartsData.push(edata);
	  						 //console.log(resDatas.length,i)
	  						 if(resDatas.length==(that.echartsData.length)){
	  							//导航地图
	  							that.mainMapEchartsFull();
	  						 }
	  					 }
	  				 });
	  				 //console.log('resDatas',resDatas)
	  			 }
	  		 }); 
	  },
      mainMapEchartsFull(){
        var mainMapall=this.$refs.mainMapall;
        let myChart = this.$echarts.getInstanceByDom(
          this.$refs.mainMapall
        );
        if (myChart == null) {
          myChart = this.$echarts.init(mainMapall);
        }
        var option;
        var that=this;
        //var ROOT_PATH ='https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/Map_of_Iceland.svg';
        $.get(require('@/assets/img/Map_of_guangyaal_map.svg'), function (svg) {
          
          echarts.registerMap('guangyaal_map_svg', { svg: svg });
          option = {
            tooltip: {
              show: false,
              //这里设置提示框
              trigger: "item", //数据项图形触发
              backgroundColor: "#f1f1f1", //提示框浮层的背景颜色。
              //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
              formatter: function(res){
                 //console.log('res',res);
                 //console.log('data',res.data);
                 var resData=res.data;
                 return resData[3]+'';
              },
            },
            geo: {
              tooltip: {
                show: true
              },
              map: 'guangyaal_map_svg',
              left: '0',//地图距离上下左右空白距离
              right: '0',
              roam: true,
              zoom:1.8,
              scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
                min:1,                           //最小的缩放值
                max:3,                           //最大的缩放值
              },
              label:{
                show:true,
              }
            },
            series: {
              type: 'custom',
              coordinateSystem: 'geo',
              geoIndex: 0,
              zlevel:2,
              aspectScale: 0.75, //长宽比
              zoom:1.8,
              data:that.echartsData,
              
              renderItem(params, api) {
                const coord = api.coord([
                  api.value(0, params.dataIndex),
                  api.value(1, params.dataIndex)
                ]);
                const circles = [];
                for (let i = 0; i < 15; i++) {
                  circles.push({
                    type: 'circle',
                    shape: {
                      cx: 0,
                      cy: 0,
                      r: 30
                    },
                    style: {
                      stroke: '#E6940E',
                      fill: 'none',
                      lineWidth: 2
                    },
                    // Ripple animation
                    keyframeAnimation: {
                      duration: 4000,
                      loop: true,
                      delay: (-i / 4) * 4000,
                      keyframes: [
                        {
                          percent: 0,
                          scaleX: 0,
                          scaleY: 0,
                          style: {
                            opacity: 1
                          }
                        },
                        {
                          percent: 1,
                          scaleX: 1,
                          scaleY: 0.4,
                          style: {
                            opacity: 0
                          }
                        }
                      ]
                    }
                  });
                }
                return {
                  type: 'group',
                  x: coord[0],
                  y: coord[1],
                  children: [
                    ...circles,
                    {
                      type: 'path',
                      shape: {
                        d: 'M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z',
                        x: -8,
                        y: -35,
                        width: 15,
                        height: 30
                      },
                      style: {
                        fill: '#E6940E'
                      },
                      // Jump animation.
                      keyframeAnimation: {
                        duration: 1000,
                        loop: true,
                        delay: Math.random() * 1000,
                        keyframes: [
                          {
                            y: -10,
                            percent: 0.5,
                            easing: 'cubicOut'
                          },
                          {
                            y: 0,
                            percent: 1,
                            easing: 'bounceOut'
                          }
                        ]
                      }
                    }
                  ]
                };
              }
            }
          };
          that.loadingMapall=false;
          myChart.setOption(option);
        });
        
        
        option && myChart.setOption(option);

      },
      
  }
}
</script>

<style scoped>
.mapinfobox{
    width:100%;min-height:800px;
	height:100vh;
    background: url('@/assets/img/mapbg.png') center center;
}
</style>
